<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta content="width=devide-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
<meta content="yes" name="apple-mobile-web-app-capable">
<meta content="black" name="apple-mobile-web-app-status-bar-style">
<meta content="telephone=no" name="format-detection">
<meta content="email=no" name="format-detection">
<style>
* {
    margin: 0;
    padding: 0;
}
html, body, #part1, #part2, #part3, #part4, #part5 {
    width: 100%;
    height: 100%;
    overflow: hidden;
}
#part1, #part2, #part3, #part4, #part5 {
    position: absolute;
    top: 0;
    left: 0;
}
.hidden {
    display: none;
}

.bg, .bg2, .bg3 {
    width: 100%;
    height: 100%;
    background: url('images/红包游戏-首页竖版.png');
    background-size: 100% 100%;
    text-align: center;
}
.bg a {
    display: block;
    position: absolute;
    top: 65%;
    left: 50%;
    transform: translate(-50%, -50%);
    height: 12%;
}
.bg a img {
    height: 100%;
}
/**/
.bg2 {
    background-image: url('images/红包游戏-游戏中竖版背景.png')
}
.bg3 {
    position: absolute;
    background-image: url('images/红包游戏-游戏中竖版.png');
    top: 0;
    left: 0;
}
.bottom {
    position: absolute;
    width: 102%;
    height: 26%;
    left: 49%;
    bottom: 0;
    transform: translate(-50%, 0);
}

.time, .score {
    position: absolute;
    height: 8%;
    left: 5px;
    top: 20px;
}
.time img, .score img {
    height: 100%;
}
.time span, .score span {
    position: absolute;
    top: 32%;
    left: 57%;
    color: #FFE363;
    font-size: 14px;
}

.score {
    left: unset;
    right: 5px;
}
.score span {
    left: 59%;
    margin-top: 1px;
}

canvas {
    width: 100%;
    height: 84%;
}

/**/
.msg {
    position: absolute;
    width: 100%;
    left: 0;
    top: 10%;
}
.btn {
    position: absolute;
    height: 10%;
    left: 50%;
    bottom: 30.5%;
    transform: translate(-50%, 0);
}
.btn img {
    height: 100%;
}

/**/
#part5 #result {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, 0);
    font-size: 35px;
    color: #FFE363;
}
</style>
<title>标题</title>
</head>
<body>
<div class="hidden">
    <img id="hongbao" src="images/红包游戏-游戏界面-游戏_10.png" />
    <img id="pack-front" src="images/红包游戏-游戏界面-游戏3_03.png" />
    <img id="pack-back" src="images/红包游戏-游戏界面-游戏4_03.png" />
</div>

<div id="part1">
<div class="bg">
<div><a href="#" onclick="javascript:jumpToPart2();"><img src="images/红包游戏-首页-现在开始_03.png" /></a></div>
</div>
</div>

<div id="part2" class="hidden">
    <div class="bg2">
        <div style="height: 100%;">
            <canvas id="canvas"></canvas>
            <div class="time">
                <img src="images/红包游戏-游戏界面-游戏_03.png" />
                <span>0</span>
            </div>
            <div class="score">
                <img src="images/红包游戏-游戏界面_05.png" />
                <span>0</span>
            </div>
            <div class="bg3"></div>
        </div>
    </div>
</div>

<div id="part3" class="hidden">
    <div class="bg2">
        <div>
            <div class="bg3"></div>
            <img class="msg" src="images/红包游戏-开红包竖版3_02.png" />
            <a href="#" onclick="javascript:jumpToPart1();" class="btn"><img src="images/红包游戏-恭喜你_01_03.png" /></a>
        </div>
    </div>
</div>

<div id="part4" class="hidden">
    <div class="bg2">
        <div>
            <div class="bg3"></div>
            <img class="msg" src="images/红包游戏-开红包竖版2_02.png" />
            <a href="#" onclick="javascript:jumpToPart1();" class="btn"><img class="btn" src="images/红包游戏-恭喜你_01_03.png" /></a>
        </div>
    </div>
</div>

<div id="part5" class="hidden">
    <div class="bg2">
        <div>
            <div class="bg3"></div>
            <img class="msg" src="images/红包游戏-开红包竖版1_02.png" />
            <div id="result">123</div>
            <a href="#" onclick="javascript:open_hb();" class="btn"><img src="images/打开红包.png" /></a>
        </div>
    </div>
</div>

<script>
    var hongbao = document.getElementById("hongbao");
    var pack_front = document.getElementById("pack-front");
    var pack_back = document.getElementById("pack-back");

    var time_span = document.querySelector(".time span");
    var score_span = document.querySelector(".score span");

    var canvas = document.querySelector("canvas");
    var ctx = canvas.getContext("2d");

    var game = {};

    var config = {
        time: 5, // 时间秒
        interval: 300, // 创建间隔
        whetherCreate: 1, // 创建概率
        xSpeed: 50,
        envW: 0.5, // 口袋宽度
        hbW: 0.1 // 红包宽度
    }

    function start() {
        canvas.width = canvas.clientWidth;
        canvas.height = canvas.clientHeight;

        game = {
            time: config.time,
            score: 0,
            total: 0,
            hb: [],
            needCreate: false,
            animationId: null,
            timerId: null,
            timerId2: null
        };
        game.x = canvas.width / 2;
        game.envW = canvas.width * config.envW;
        game.envH = game.envW / pack_back.width * pack_back.height;
        game.hbW = canvas.width * config.hbW;
        game.hbH = game.hbW / hongbao.width * hongbao.height;

        draw();
        time_span.innerHTML = game.time;
        setTimeout(function() {
            game.timerId = setInterval(function() {
                game.time--;
                time_span.innerHTML = game.time;

                if (game.time == 0) {
                    clearInterval(game.timerId);
                    clearInterval(game.timerId2);
                    cancelAnimationFrame(game.animationId);
                    
                    setTimeout(function() {
                        jumpToPart5();
                    });
                }
            }, 1000);
            game.timerId2 = setInterval(function() {
                if (Math.random() < config.whetherCreate) {
                    game.needCreate = true;
                }
            }, config.interval);
        }, 2000);
    }

    function draw() {
        ctx.clearRect(0, 0, canvas.width, canvas.height);

        ctx.drawImage(pack_back, (canvas.width - game.envW) / 2, canvas.height - game.envH * 0.87, game.envW, game.envH);
        
        if (game.needCreate) {
            game.needCreate = false;
            var offset = Math.random() * game.envW * 0.4 - game.envW * 0.2;
            var halfW = (canvas.width / 2 - Math.abs(offset));
            halfW = offset < 0 ? -halfW : halfW;
            game.hb.push({
                x: canvas.width / 2 + offset,
                y: canvas.height * 0.82,
                a: Math.abs(halfW * 0.3 + Math.random() * halfW * 0.7 + offset) / 2,
                b: canvas.height * 0.3 + Math.random() * canvas.height * 0.5,
                offset: offset,
                x0: -1,
                dir: offset > 0 ? 1 : -1,
                clicked: false
            });
            game.total++;
        }
        
        for (var i = 0; i < game.hb.length; i++) {
            var hb = game.hb[i];
            if (hb.hidden) continue;
            if (hb.clicked) {
                if (hb.ratio <= 0) {
                    hb.hidden = true;
                    continue;
                }
                hb.ratio -= 1 / 30;
                hb.x += hb.stepX / 30;
                hb.y += hb.stepY / 30;
                ctx.drawImage(hongbao, hb.x - game.hbW * hb.ratio / 2, hb.y - game.hbW * hb.ratio / 2, game.hbW * hb.ratio, game.hbH * hb.ratio);
                continue;
            }
            goNext(hb);
            ctx.drawImage(hongbao, hb.x - game.hbW / 2, hb.y - game.hbW / 2, game.hbW, game.hbH);
        }
        
        ctx.drawImage(pack_front, (canvas.width - game.envW) / 2, canvas.height - game.envH * 0.87, game.envW, game.envH);

        score_span.innerHTML = game.score;

        game.animationId = requestAnimationFrame(draw);
    }

    function getY(a, b, x) {
        var k = -b / a / a;
        return k * (x + a) * (x - a);
    }

    function goNext(hb) {
        if (hb.x0 == -1) {
            hb.x0 = hb.dir == 1 ? -hb.a : hb.a;
        }
        hb.x += hb.dir * hb.a / config.xSpeed;
        hb.x0 += hb.dir * hb.a / config.xSpeed;
        hb.y = canvas.height * 0.8 - getY(hb.a, hb.b, hb.x0);
        if (hb.y > canvas.height * 0.9) hb.hidden = true;
    }

    canvas.parentElement.addEventListener("touchstart", function(e) {
        e.preventDefault();

        var touch = e.changedTouches[0];
        var touchX = touch.pageX - (window.innerWidth - canvas.width) / 2;
        var touchY = touch.pageY - (window.innerHeight - canvas.height) / 2;

        for (var i = 0; i < game.hb.length; i++) {
            let hb = game.hb[i];
            if (touchX >= hb.x - game.hbW / 2 * 1.3 && touchX <= hb.x + game.hbW / 2 * 1.3) {
                if (touchY >= hb.y - game.hbH / 2 * 1.6 && touchY <= hb.y + game.hbH / 2 * 1.6) {
                    hb.clicked = true;
                    hb.ratio = 1;
                    hb.stepX = canvas.width / 2 - hb.x;
                    hb.stepY = canvas.height * 0.8 - hb.y;
                    game.score++;
                }
            }
        }
    }, false);

    function jumpToPart1() {
        document.getElementById("part1").classList.remove("hidden");
        document.getElementById("part3").classList.add("hidden");
        document.getElementById("part4").classList.add("hidden");
    }
    function jumpToPart2() {
        document.getElementById("part1").classList.add("hidden");
        document.getElementById("part2").classList.remove("hidden");

        start();
    }
    function jumpToPart3() {
        document.getElementById("part5").classList.add("hidden");
        document.getElementById("part3").classList.remove("hidden");
    }
    function jumpToPart4() {
        document.getElementById("part5").classList.add("hidden");
        document.getElementById("part4").classList.remove("hidden");
    }
    function jumpToPart5() {
        document.getElementById("result").innerHTML = game.score;
        document.getElementById("part2").classList.add("hidden");
        document.getElementById("part5").classList.remove("hidden");
    }
    function open_hb() {
        if (game.score > 10) {
            jumpToPart3();
        } else {
            jumpToPart4();
        }
    }

    window.oncontextmenu = function(e) {
        e.preventDefault();
    }
</script>
</body>
</html>
